<template>
  <div class="bodys">
    <div id="left">
      <a-menu
        style="width: 256px"
        mode="inline"
        :openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        @openChange="onOpenChange"
      >
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <AppstoreOutlined />
              <span>博客管理</span>
            </span>
          </template>
          <a-menu-item key="1">
            <router-link to="/home/user"> 用户管理 </router-link>
          </a-menu-item>
          <a-menu-item key="2">
            <router-link to="/home/article"> 文章管理 </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <MailOutlined />
              <span>消息处理</span>
            </span>
          </template>
          <a-menu-item key="3">
            <router-link to="/home/advertising"> 广告处理 </router-link>
          </a-menu-item>
          <a-menu-item key="4">
            <router-link to="/home/message"> 用户消息处理 </router-link>
          </a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #title>
            <span>
              <SendOutlined />
              <span>公告编辑</span>
            </span>
          </template>
          <a-menu-item key="5">
            <router-link to="/home/notice"> 发公告 </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div id="contents">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import {
  MailOutlined,
  AppstoreOutlined,
  SendOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  setup() {
    const state = reactive({
      rootSubmenuKeys: ["sub1", "sub2", "sub3"],
      openKeys: ["sub1"],
      selectedKeys: [],
    });

    const onOpenChange = (openKeys) => {
      const latestOpenKey = openKeys.find(
        (key) => state.openKeys.indexOf(key) === -1
      );

      if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        state.openKeys = openKeys;
      } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    };
    return {
      ...toRefs(state),
      onOpenChange,
    };
  },

  components: {
    MailOutlined,
    AppstoreOutlined,
    SendOutlined,
  },
});
</script>

<style socped>
.bodys {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
</style>